import React, { useState, useEffect } from 'react';
import { Layout, Menu, Button, Space } from 'antd';
import { Link, useLocation, useNavigate } from 'react-router-dom';
import {
  DashboardOutlined,
  UserOutlined,
  AppstoreOutlined,
  ShoppingCartOutlined,
  GiftOutlined,
  BarChartOutlined,
  SettingOutlined,
  TrophyOutlined,
  UserAddOutlined,
  DollarOutlined,
  TeamOutlined,
  FileTextOutlined,
  PieChartOutlined,
  LineChartOutlined,
  AreaChartOutlined,
  FundOutlined,
  AccountBookOutlined,
  MoneyCollectOutlined,
  GlobalOutlined
} from '@ant-design/icons';
import { switchLanguage, getCurrentLanguage, t } from '../utils/i18n';
import '../styles/modern-ui.css';

const { Header, Sider, Content } = Layout;

const LayoutWrapper = ({ children }) => {
  const location = useLocation();
  const navigate = useNavigate();
  const [currentLanguage, setCurrentLanguage] = useState(getCurrentLanguage());

  const handleLanguageChange = () => {
    switchLanguage();
    setCurrentLanguage(getCurrentLanguage());
  };
  
  // 获取当前路径对应的菜单key
  const getSelectedKey = () => {
    const path = location.pathname;
    if (path === '/dashboard') return ['dashboard'];
    if (path === '/users') return ['users'];
    if (path === '/menu') return ['menu'];
    if (path === '/orders') return ['orders'];
    if (path === '/coupons') return ['coupons'];
    if (path === '/social-review') return ['social-review'];
    if (path === '/invite-management') return ['invite-management'];
    if (path === '/reports') return ['reports'];
    if (path === '/system') return ['system'];
    return ['dashboard'];
  };

  return (
    <Layout style={{ 
      minHeight: '100vh',
      background: 'linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%)'
    }}>
      <Sider 
        width={200} 
        style={{ 
          background: 'rgba(255, 255, 255, 0.95)',
          backdropFilter: 'blur(20px)',
          borderRight: '1px solid rgba(0, 0, 0, 0.06)',
          boxShadow: '4px 0 24px rgba(0, 0, 0, 0.08)'
        }}
      >
        <div style={{ 
          padding: '20px 16px', 
          borderBottom: '1px solid rgba(0, 0, 0, 0.06)',
          background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
          margin: '8px',
          borderRadius: '12px',
          boxShadow: '0 4px 12px rgba(102, 126, 234, 0.3)'
        }}>
          <h3 style={{ 
            color: '#fff', 
            margin: 0, 
            textAlign: 'center',
            fontWeight: '600',
            textShadow: '0 2px 4px rgba(0, 0, 0, 0.2)'
          }}>管理后台</h3>
        </div>
        <Menu
          mode="inline"
          selectedKeys={getSelectedKey()}
          style={{ 
            height: '100%', 
            borderRight: 0,
            background: 'transparent',
            padding: '8px'
          }}
          className="modern-menu"
          items={[
            { key: 'dashboard', icon: <DashboardOutlined />, label: <Link to="/dashboard">{t('dashboard')}</Link> },
            { key: 'users', icon: <UserOutlined />, label: <Link to="/users">{t('userManagement')}</Link> },
            { key: 'menu', icon: <AppstoreOutlined />, label: <Link to="/menu">{t('menuManagement')}</Link> },
            { key: 'orders', icon: <ShoppingCartOutlined />, label: <Link to="/orders">{t('orderManagement')}</Link> },
            { key: 'coupons', icon: <GiftOutlined />, label: <Link to="/coupons">{t('couponManagement')}</Link> },
            { key: 'social-review', icon: <TrophyOutlined />, label: <Link to="/social-review">{t('socialReview')}</Link> },
            { key: 'invite-management', icon: <UserAddOutlined />, label: <Link to="/invite-management">{t('inviteManagement')}</Link> },
            {
              key: 'reports',
              icon: <BarChartOutlined />,
              label: t('reportsAnalysis'),
              children: [
                {
                  key: 'sales-reports',
                  label: t('salesReports'),
                  icon: <PieChartOutlined />,
                  children: [
                    { key: 'daily-sales', label: <Link to="/reports?category=sales&type=daily">{t('dailySalesReport')}</Link> },
                    { key: 'monthly-sales', label: <Link to="/reports?category=sales&type=monthly">{t('monthlySalesReport')}</Link> },
                    { key: 'product-sales', label: <Link to="/reports?category=sales&type=product">{t('productSalesReport')}</Link> }
                  ]
                },
                {
                  key: 'user-reports',
                  label: t('userReports'),
                  icon: <TeamOutlined />,
                  children: [
                    { key: 'user-growth', label: <Link to="/reports?category=users&type=growth">{t('userGrowthReport')}</Link> },
                    { key: 'user-activity', label: <Link to="/reports?category=users&type=activity">{t('userActivityReport')}</Link> },
                    { key: 'user-retention', label: <Link to="/reports?category=users&type=retention">{t('userRetentionReport')}</Link> }
                  ]
                },
                {
                  key: 'financial-reports',
                  label: t('financialReports'),
                  icon: <DollarOutlined />,
                  children: [
                    { key: 'revenue-report', label: <Link to="/reports?category=financial&type=revenue">{t('revenueReport')}</Link> },
                    { key: 'cost-report', label: <Link to="/reports?category=financial&type=cost">{t('costReport')}</Link> },
                    { key: 'profit-report', label: <Link to="/reports?category=financial&type=profit">{t('profitReport')}</Link> },
                    { key: 'tax-report', label: <Link to="/reports?category=financial&type=tax">{t('taxReport')}</Link> }
                  ]
                }
              ]
            },
            { key: 'system', icon: <SettingOutlined />, label: <Link to="/system">{t('systemManagement')}</Link> }
          ]}
        />
      </Sider>
      <Layout>
        <Header style={{ 
          background: 'rgba(255, 255, 255, 0.95)', 
          padding: '0 32px', 
          borderBottom: '1px solid rgba(0, 0, 0, 0.06)',
          backdropFilter: 'blur(20px)',
          boxShadow: '0 2px 8px rgba(0, 0, 0, 0.06)',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'space-between'
        }}>
          <h2 style={{ 
            margin: 0,
            background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
            WebkitBackgroundClip: 'text',
            WebkitTextFillColor: 'transparent',
            backgroundClip: 'text',
            fontWeight: '700',
            fontSize: '24px'
          }}>{t('adminPanel')}</h2>
          <Space>
            <Button 
              type="text" 
              icon={<GlobalOutlined />}
              onClick={handleLanguageChange}
              style={{
                display: 'flex',
                alignItems: 'center',
                color: '#667eea',
                fontWeight: '500'
              }}
            >
              {currentLanguage === 'zh' ? 'English' : '中文'}
            </Button>
          </Space>
        </Header>
        <Content style={{ 
          margin: '16px', 
          padding: 0, 
          background: 'transparent', 
          minHeight: 280,
          borderRadius: '16px',
          overflow: 'hidden'
        }} className="fade-in">
          {children}
        </Content>
      </Layout>
    </Layout>
  );
};

export default LayoutWrapper;